import React, { useEffect, useState } from 'react';
import './gratisvip.scss'
import { Select, Input, Table, Button, Switch } from 'antd';
import * as service from '../../../../api/tzp'
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';

interface DataType {
    key: string;
    id: number, 
    grade: string,
    gradename: string,
    value:string,
    rights:string,
    packs:string,
    flag:number,
    time:string
}
function Gratisvip(props: any) {
    // 输入框内容
  var [inputText,setinputText] = useState('')
  var intchange = (e:any)=>{
      console.log(e.target.value);
      setinputText(e.target.value)
  }
  var searchlabel = async()=>{
    var res = await service.vipgrade_search({gradename_like:inputText})
    setTableData(res.data)
  }
  //   请求用户列表
  var [tableData,setTableData] = useState<DataType[]>([])
  var user = async ()=>{
    var res = await service.vipgrade_list()
    console.log(res);
    setTableData(res.data)
  }
  useEffect(()=>{
    user()
  },[])
  
   //表格列表的配置
const columns: ColumnsType<DataType> = [
    
    {
        title: '等级', 
        dataIndex: 'grade', 
        key: 'grade',
        align: 'center',
<<<<<<< HEAD
        width:100,
=======
        width:170,
>>>>>>> 4dc7408c1bcb6ff0ec360103d3a141bafa1cdc9e
        render: ( _ ,record) => <div className='user'style={{color:'orange'}} >{record.grade}</div>,
    },
    {
        title: '等级名称', 
        key: 'gradename',
        align: 'center',

        render: ( _ ,record) => <div >{record.gradename}</div>,
    },
    {
        title: '成长值', 
        key: 'value',
        align: 'center',

        render: ( _ ,record) => <div >{record.value}</div>,
    },
    {
        title: '等级权益', 
        key: 'rights',
        align: 'center',

        render: ( _ ,record) => <div >{record.rights}</div>,
    },
    {
        title: '升级礼包', 
        key: 'packs',
        align: 'center',

        render: ( _ ,record) => <div >{record.packs}</div>,
    },
    {
        title: '等级状态', 
        dataIndex: 'flag',
        key: 'flag',
        align: 'center',
        render: (text, record) => <Switch defaultChecked={text} />

    },
    {
        title: '最后修改时间', 
        key: 'time',
        align: 'center',
        render: ( _ ,record) => <div >{record.time}</div>,
    },
    {
        title: '操作',
        key: 'tip',
        align: 'center',
        render: ( _ ,record ) => {
            return <>
                <Button  style={{color:'blue'}} onClick={()=>{del(record.id)}}>删除</Button>
                <Button  style={{color:'blue'}} onClick={()=>{ updataUser(record) }} >编辑</Button>
            </>
        },
    },
]
// 编辑
var updataUser =  (record:any)=>{
    
}
// 删除数据
var del =async (id:any)=>{
    var remove = await service.delete_vipgrade({id:id})
    console.log(remove);
    var res = await service.vipgrade_list()
     console.log(res);
     setTableData(res.data)
 }
 var navigate =  useNavigate()
 var Addgratis = ()=>{
    navigate('/index/addgratis')
 }
    return (
        <div className='gratisvip'>
            <div className='title-box'>
                <div className='title-top'>用户管理 / 免费会员等级管理</div>
                <div className='title-bottom'>免费会员等级管理</div>
            </div>
            <div className='gratisvip-box'>
                <div className='gratisvip-left'>

                    <div className='gratisvip-name'>
                        <span>等级名称</span>
                        <Input placeholder="请输入" onChange={(e) => { intchange(e) }} style={{ width: 200 }} />
                    </div>
                </div>
                <div className='gratisvip-right'>
                    <button onClick={() => { searchlabel() }}>查询</button>
                    <button>重置</button>
                </div>
            </div>
            <div className="gratisvip-list">
                <div className='list_box'>
                    <div className='list-left'><div className="list-title">用户列表</div></div>
                    <div className='list-right'>
                        <button onClick={()=>{Addgratis()}}>新建</button>
                        <button>全部删除</button>
                    </div>
                </div>
                <Table columns={columns} dataSource={tableData} style={{marginTop:20}} rowKey="id"/>

            </div>
        </div>
    );
}

export default Gratisvip;